<template>
  <view class="easy-tabs">
    <ul>
      <li :class="{ active: tab.value === activeTab }" v-for="tab in tabList" :key="tab.value" @click="tabChange(tab)"><p v-text="tab.name"></p></li>
    </ul>
  </view>
</template>

<script>
  export default {
    name: 'EasyTabs',
    data() {
      return {
        tabList: [
          { value: 1, name: '进行中' },
          { value: 3, name: '已完成' },
        ],
        activeTab: 1,
      };
    },
    methods: {
      tabChange(tab) {
        if (tab.value === this.activeTab) {
          return;
        }
        this.activeTab = tab.value;
        this.$emit('tab-change', { value: tab.value });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .easy-tabs {
    &, * {
      box-sizing: border-box;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: flex;
      width: 100%;
      li {
        flex: 1;
        /*float: left;*/
        margin: 0;
        padding: 0;
        /*width: 50%;*/
        text-align: center;
        position: relative;
        border-bottom: 1px solid #cccccc;
        p {
          cursor: pointer;
          padding: 10px 0;
        }
        &.active {
          border-bottom: 2px solid #007aff;
          p {
            color: #007aff;
          }
        }
        & + li {
          &:before {
            content: "";
            display: block;
            width: 1px;
            background-color: #cccccc;
            height: 50%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      &:after {
        content: "";
        display: block;
        clear: both;
      }
    }
  }
</style>
